<template>
  <div @contextmenu.prevent="handleContextMenu" class="unselectable">
    <div style="font-size: 16px;font-weight: 600;"> <el-radio></el-radio>电话回访列表</div>
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <el-row style="margin-top: 15px;">
        <el-form-item>
          <el-input type="text" clearable placeholder="手机号" style="width: 150px"
            v-model="state.dataForm.col1"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="text" clearable placeholder="公司名称" style="width: 150px"
            v-model="state.dataForm.col2"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="text" clearable placeholder="联络结果" style="width: 150px"
            v-model="state.dataForm.result"></el-input>
        </el-form-item>
        <!-- 查询 -->
        <el-button @click="state.getDataList()" type="primary">{{ $t("query") }}</el-button>
        <el-button @click="visit()" type="primary" :disabled="state.single">回访</el-button>
        <el-button @click="handleAudit()" type="primary" :disabled="state.multiple">短信推送电子门票</el-button>
        <el-button type="danger" @click="state.deleteHandle()">{{ $t("deleteBatch") }}</el-button>
      </el-row>
      <!-- 表格 -->
      <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
        v-loading="state.dataListLoading" :data="state.dataList" border
        @selection-change="state.dataListSelectionChangeHandle">
        <el-table-column type="selection" v-if="showSelectionColumn"></el-table-column>
        <el-table-column v-if="columns" v-for="column in columns" :key="column.colName" :label="column.label"
          :prop="column.colName" :fixed="column.fixed" :formatter="column.formatter" :width="column.width"
          show-overflow-tooltip>
          <template #default="{ row }" v-if="column.colName === 'col1'">
            <span>{{ maskPhoneNumber(row.col1) }}</span>
          </template>
          <template #default="{ row }" v-if="column.colName === 'col56'">
            <span>{{ identitycard(row.col56) }}</span>
          </template>
          <template #default="{ row }" v-if="column.colName === 'state'">
            <el-tag v-if="row.state === '1'" type="success">已回访</el-tag>
            <el-tag v-else type="danger">未回访</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <!-- 页码 -->
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
      :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
      @current-change="state.pageCurrentChangeHandle"> </el-pagination>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { nextTick, onMounted, reactive, ref, toRefs, watch } from "vue";
import baseService from "@/service/baseService";
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from "axios";
import { useAppStore } from "@/store";
import { useRouter, useRoute } from 'vue-router'
const store = useAppStore();
const view = reactive({
  getDataListURL: '/noc/nocrepay/list',
  getDataListIsPage: true,
  deleteURL: "/noc/nocrepay",
  deleteIsBatch: true,
  dataForm: {
    col1: "",//手机号
    col2: "",//公司名称
    result: "",//联络结果
    id: "",
    tid: useRoute().query.tid,
  },

});


/**
 * 禁止右键
 * @param event
 */
const handleContextMenu = (event: any) => {
  event.preventDefault();
};


/**
 * 跳转到回访页面
 */
const router = useRouter();
const route = useRoute();
const visit = () => {
  router.push({
    path: "/noc/noc-followup-task",
    query: {
      id: route.query.id
    }
  });
};


const init = () => {
  getInfo()
};



// 手机号做脱敏
const maskPhoneNumber = (phone: string) => {
  if (!phone) return '';
  const prefix = phone.slice(0, 3);
  const suffix = phone.slice(-3);
  return `${prefix}*****${suffix}`

};

// 身份证号做脱敏
const identitycard = (id: string) => {
  if (!id) {
    return '';
  }
  // 提取前6位和后4位，中间8位用星号填充
  return id.slice(0, 6) + '********' + id.slice(-4);
};


// 控制选择列的显示与隐藏
const showSelectionColumn = ref(false)

const columns = ref<any[]>([]);

//列表固定数据
const getInfo = () => {
  return getinfolist().then(() => {
    // 添加固定列数据到columns.value中
    const preColumns = [
      { label: "id", colName: "id", index: "id", width: 80, key: true, formatter: null },
      { label: "状态", colName: "state", index: "state", width: 120, key: true, formatter: null },
      { label: "回访人", colName: "repay", index: "repay", width: 80, key: true, formatter: null },
      { label: "回访时间", colName: "repayTime", index: "repayTime", width: 150, key: true, formatter: null },
      { label: "联络结果", colName: "result", index: "result", width: 150, key: true, formatter: null },
      { label: "签到", colName: "isSign", index: "is_sign", width: 80, formatter: null },
      { label: "来源", colName: "ly", index: "ly", width: 80, formatter: null }
    ];

    const afterColumns = [
      { label: "签到时间", colName: "signTime", index: "signTime", width: 150, formatter: null },
      { label: "创建时间", colName: "createTime", index: "create_time", width: 150, formatter: null },
    ];

    // columns数组的前面增加preColumns
    columns.value.unshift(...preColumns);
    // columns数组的后面增加afterColumns
    columns.value.push(...afterColumns);
  });
};


const getinfolist = () => {
  return baseService.get("crm/noctemplate/templateCols", { tid: state.dataForm.tid }).then((res) => {
    //查询数据
    state.getDataList();
    const processedData = res.data.map((item: { cols_name: any; col_id: any; }) => ({
      ...item,
      label: item.cols_name,
      colName: 'col' + item.col_id
    }));
    columns.value = processedData;
    showSelectionColumn.value = true;
  });
};


//短信推送
const handleAudit = () => {
  ElMessageBox.confirm(
    '是否短信推送电子门票？？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      customClass: 'custom-message-box'
    }
  ).then(() => {
    smspush();
  }).catch(() => {

  });
};

const smspush = () => {
  let ids: string[] = [];
  for (let i = 0; i < state.dataListSelections!.length; i++) {
    ids.push(state.dataListSelections![i].id);
  }
  const targetId = ids[0];
  // 使用模板字面量将targetId拼接到URL中
  const url = `/noc/nocrepay/sendmsg/${targetId}`;
  baseService.get(url).then((res) => {
    ElMessage.success('短信推送成功');
    state.getDataList();
  });
};

const state = reactive({ ...useView(view), ...toRefs(view) });

//页面进入执行
init();

</script>
<style lang="scss" scoped>
::v-deep .el-table .cell {
  text-align: center;
  white-space: nowrap;
}

.el-tag {
  height: 20px;
  line-height: 20px;
}

.unselectable {
  -webkit-user-select: none;
  /* Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+/Edge */
  user-select: none;
  /* Standard syntax */
}
</style>
